<template>
  <div class="grid transition-all rounded-lg overflow-hidden" :class="expand ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'">
    <div v-if="expand" class="min-h-0 rounded-lg flex flex-col" :class="`gap-${props.gap}`">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang='ts'>

interface IProsp {
  expand?: boolean,
  gap?: number,
}

const props = withDefaults(defineProps<IProsp>(), {
  expand: true,
  gap: 1,
})

</script>

<style></style>